JS - language picker - 02

revision:

Have a look at the HTML and CSS settings for the different approaches

example: quotes

This English quote has a nested quote inside.
This French quote has a nested quote inside.
This German quote has a nested quote inside.
I live in Italy.Ciao bella!
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
This is English, but これは日本語です。
code: 
                <div class="title">example 1 - quotes</div><br>
                <div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
                <div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
                <div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>
                <div>I live in Italy.<span lang="it">Ciao bella!</span></div>
                <div><q>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis 
                egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec
                eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</q></div>    
                <div>This is <em>English</em>, but <span lang="ja">これは<em>日本語</em>です。</span></div>

example: ISO language codes

It is polite to welcome people in their own language:

It is polite to welcome people in their own language:

code: 
                <p>It is polite to welcome people in their own language:</p>
                <ul>
                    <li lang="zh-Hans">欢迎</li>
                    <li lang="zh-Hant">歡迎</li>
                    <li lang="el">Καλοσωρίσατε</li>
                    <li lang="ar">اهلا وسهلا</li>
                    <li lang="ru">Добро пожаловать</li>
                    <li lang="din">Kudual</li>
                </ul>
                <p>It is polite to welcome people in their own language:</p>
                    <ul>
                        <li class="zhs" lang="zh-Hans">欢迎</li>
                        <li class="zht" lang="zh-Hant">歡迎</li>
                        <li class="el" lang="el">Καλοσωρίσατε</li>
                        <li class="ar" lang="ar">اهلا وسهلا</li>
                        <li class="ru" lang="ru">Добро пожаловать</li>
                        <li class="din" lang="din">Kudual</li>
                    </ul>

example: select languages

English
Dutch
French
German
Japanese

code: 
                <form>
                    <input type="radio" name="language" value="English">English<br>
                    <input type="radio" name="language" value="Dutch">Dutch<br>
                    <input type="radio" name="language" value="French">French<br>
                    <input type="radio" name="language" value="German">German<br>
                    <input type="radio" name="language" value="Japanese">Japanese<br>
                    <input type="button" id="btn" value="Selected language"><br>
                    <p id="selection"></p>
                </form>
                <script>
                    const btn = document.querySelector('#btn');
                    btn.onclick = function () {
                        const rbs = document.querySelectorAll('input[name="language"]');
                        let selectedValue;
                        for (const rb of rbs) {
                            if (rb.checked) {
                                selectedValue = rb.value;
                                break;
                            }
                        }
                        document.getElementById('selection').innerHTML = "The selected language is " + selectedValue;
                    };
                </script>

example: select languages via radio buttons

retrieve the language radio button selected value using JavaScript

Select the language:
English
Dutch
Chinese
Japanese
French
German
Korean

code: 
                <p>retrieve the language radio button selected value using JavaScript</p>
                <p>Select the language:<br>
                    <input type="radio" name="taal" onclick="myFunction(this)" value="English">English<br>
                    <input type="radio" name="taal" onclick="myFunction(this)" value="Dutch">Dutch<br>
                    <input type="radio" name="taal" onclick="myFunction(this)" value="Chinese">Chinese<br>
                    <input type="radio" name="taal" onclick="myFunction(this)" value="Japanese">Japanese<br>
                    <input type="radio" name="taal" onclick="myFunction(this)" value="French">French<br>
                    <input type="radio" name="taal" onclick="myFunction(this)" value="German">German<br>
                    <input type="radio" name="taal" onclick="myFunction(this)" value="Korean">Korean<br>
                </p>
                <script>
                    function myFunction(taal) {
                    alert(taal.value);
                    }
                </script>